Vue is an easy to use framework for building front end apps.
NativeScript is a mobile app framework that lets us build native mobile apps with popular front end frameworks.
In this article, we’ll look at how to build an app with NativeScript Vue.
ActionItem
We can use the ActionItem component to add action buttons into the ActionBar component.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App">
<ActionItem
@tap="onTapShare"
android.systemIcon="ic_menu_share"
android.position="actionBar"
/>
<ActionItem @tap="onTapDelete" text="delete" android.position="popup" />
</ActionBar>
<WrapLayout></WrapLayout>
</Page>
</template>
<script >
export default {
methods: {
onTapShare() {
console.log("shared tapped");
},
onTapDelete() {
console.log("delete tapped");
},
},
};
</script>
The first ActionItem is an icon that’s displayed on the bar.
We set the icon to display with the android.systemIcon prop.
The android.position prop sets the location that the icon is displayed in.
The 2nd ActionItem has the text prop for the menu item text.
And we set the android.position to 'popup' so that we display the ‘delete’ item in the popup menu on the top right corner.
The tap event listeners are run when we tap of the buttons.
NavigationButton
The NavigationButton component lets us add navigation buttons into our app.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App">
<NavigationButton
text="Go back"
android.systemIcon="ic_menu_back"
@tap="goBack"
/>
</ActionBar>
<WrapLayout></WrapLayout>
</Page>
</template>
<script >
export default {
methods: {
goBack() {
console.log("go back tapped");
},
},
};
</script>
We add the NavigationButton into our ActionBar .
We set the text for the navigation button, which is displayed beside the icon.
android.systemIcon sets the icon.
We have the tap event listener on the NavigationItem , so the goBack method is run when we tap on the navigation button.
ActivityIndicator
The ActivityIndicator component lets us show a progress indicator for the user.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"> </ActionBar>
<WrapLayout>
<ActivityIndicator :busy="busy" @busyChange="onBusyChanged" />
</WrapLayout>
</Page>
</template>
<script >
export default {
data() {
return { busy: false };
},
mounted() {
this.busy = true;
setTimeout(() => {
this.busy = false;
}, 3000);
},
methods: {
onBusyChanged() {
console.log("busy changed");
},
},
};
</script>
We add the ActivityIndicator to our app.
The busy prop controls when the activity indicator is displayed.
It’ll be displayed if it’s true .
Also, we listen to the busyChange event with the onBusyChanged method.
It runs whenever the busy prop is changed.
Button
We can use the Button component to add a button into the screen.
To do this, we write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout
justifyContent="space-around"
flexDirection="column"
backgroundColor="#3c495e"
>
<Button text="Button" @tap="onButtonTap" />
</FlexboxLayout>
</Page>
</template>
<script >
export default {
methods: {
onButtonTap() {
console.log("button tapped");
},
},
};
</script>
We add the Button component with the text prop to set the button text.
And we listen to the tap event with the onButtonTap method.
We can style our button with the Span component.
For example, we can write:
<template>
<Page>
<ActionBar title="NativeScript App"></ActionBar>
<FlexboxLayout
justifyContent="space-around"
flexDirection="column"
backgroundColor="#3c495e"
>
<Button @tap="onButtonTap">
<Span text="Red and Bold" fontWeight="bold" style="color: red" />
</Button>
</FlexboxLayout>
</Page>
</template>
<script >
export default {
methods: {
onButtonTap() {
console.log("button tapped");
},
},
};
</script>
We add the Span inside the Button .
The text prop sets the button text.
fontWeight sets the font-weight.
The style prop sets the text style.
Conclusion
We can add top bar items, progress indicators and buttons with NativeScript Vue.
